<template>
  <div class="main-page">
    <div class="page-title">
      <span>房地产市场交易监测分析</span>
    </div>
    <div class="main-content">
      <el-icon class="next-page-btn"><ArrowRightBold @click="router.push('/housePropertyTradeAnalysisSecond')" /></el-icon>
      <el-row :gutter="30" style="height: calc(100vh - 102px)">
        <el-col :span="9">
          <div class="house-property-land-supply-statistics" style="position: relative">
            <div class="main-content-gird-title">
              <div class="title-row">
                <div style="display: flex;align-items: center;"><img class="main-content-gird-title-logo"
                                                                     src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                                                                     alt=""/>
                  <p>房地产市场供应情况</p></div>
              </div>
              <time-filtrate-public class="time-filtrate-public" :defaultCurrentCity="cityObj.code"
                                    :cityAndAreaList="cityAndAreaList" style="max-width: 360px"
                                    @changeFiltrateTime="changeFiltrateTime($event, 'housePropertyMarketSupplyStatistics')"></time-filtrate-public>
            </div>
            <div class="module-title-content-middle-line"/>
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="house-property-land-supply-statistics__left">
                  <span>新增房屋建筑面积情况</span>
                  <public-pie
                    v-if="housePropertyLandSupplyStatisticsData.seriesData?.length"
                    ref="housePropertyLandSupplyStatistics"
                    :pieData="housePropertyLandSupplyStatisticsData"
                    class="h280"
                    @click="fullSc('publicPie', housePropertyLandSupplyStatisticsData, 'housePropertyMarketSupplySituationLeft')"
                  ></public-pie>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="house-property-house-inventory-statistics__right">
                  <span>待售房屋供应情况</span>
                  <public-pie
                    v-if="housePropertyHouseInventoryStatisticsData.seriesData?.length"
                    ref="housePropertyHouseInventoryStatistics"
                    :pieData="housePropertyHouseInventoryStatisticsData"
                    class="h280"
                    @click="fullSc('publicPie', housePropertyHouseInventoryStatisticsData, 'housePropertyMarketSupplySituationRight')"
                  ></public-pie>
                </div>
              </el-col>
            </el-row>
          </div>
          <div
            class="local-city-every-area-house-property-acreage-supply-statistics house-property-market-sale-situation"
            style="padding-bottom: 0;">
            <div class="main-content-gird-title">
              <img class="main-content-gird-title-logo"
                   src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                   alt=""/>
              <p>房地产市场销售情况</p>
            </div>
            <div class="module-title-content-middle-line" style="margin-bottom: 0px;"></div>
            <div class="house-property-land-supply-statistics__left">
              <div class="house-property-trend-row">
                <el-select class="house-property-sales-select" v-model="trendType" size="small"
                           @change="changeTrendType" style="width: 160px;margin-right: 20px;">
                  <el-option
                    v-for="item in trendList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                    class="custom-select-option"
                  />
                </el-select>
                <el-select
                  class="multiple-select house-property-sales-select"
                  v-model="trendCity"
                  size="small"
                  @change="changeTrendCity"
                  multiple
                  clearable
                  style="margin-right: 20px;"
                  collapse-tags
                  collapse-tags-tooltip
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                    class="custom-select-option"
                  />
                </el-select>
                <div class="house-property-sales-trend-analysis-tabs">
                  <el-tabs v-model="currentSaleDateTab"
                           @tab-change="changeSaleDateTab">
                    <el-tab-pane v-for="(item, index) of saleDateTab" :key="item.id"
                                 :label="item.label"
                                 :name="item.value"></el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </div>
            <div class="house-property-market-sales-statistics-chart">
              <line-new
                v-if="housePropertyMarketSalesData.seriesData?.length"
                :line-data="housePropertyMarketSalesData"
                class="h180"
                ref="housePropertyMarketSales"
                @click="fullSc('lineNew', housePropertyMarketSalesData, 'housePropertyMarketSaleSituation')"
              ></line-new>
            </div>
          </div>
          <div class="house-property-house-inventory-statistics">
            <div class="main-content-gird-title">
              <div class="title-row">
                <img class="main-content-gird-title-logo"
                     src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                     alt=""/>
                <p>房地产市场供销情况</p>
              </div>
              <CityPicker class="house-property-sales-select" v-model="currentSmCity"
                          @update:cityValue="handleSmCityPickerChange"></CityPicker>
            </div>
            <div class="module-title-content-middle-line" style="margin-bottom: 11px;"></div>
            <el-select class="house-property-sales-select" v-model="smTrendType" size="small"
                       @change="changeSmTrendType" style="width: 160px;margin-right: 10px;">
              <el-option
                v-for="item in smTrendList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
                class="custom-select-option"
              />
            </el-select>
            <el-select class="house-property-sales-select" v-model="selectedSmHouseType" size="small"
                       @change="changeSmHouseType" style="width: 120px;margin-right: 10px;">
              <el-option
                v-for="item in houseTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.name"
                class="custom-select-option"
              />
            </el-select>
            <el-select class="house-property-sales-select" v-model="selectedSmHouseArea" size="small"
                       @change="changeSmHouseArea" style="width: 120px;">
              <el-option
                v-for="item in areaTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.name"
                class="custom-select-option"
              />
            </el-select>
            <div class="house-property-market-supply-sale-situation-chart">
              <bar ref="housePropertySupplyDemandTrend"
                   v-if="housePropertySupplyDemandTrendData?.xAxisData?.length"
                   :barData="housePropertySupplyDemandTrendData"
                   class="h167"
                   @click="fullSc('bar', housePropertySupplyDemandTrendData, 'housePropertyMarketSaleSituation')"
              ></bar>
            </div>
          </div>
        </el-col>
        <el-col :span="6" style="position: relative">
          <div class="middle-map">
            <map-box
              :listData="mapList"
              :mapConfig="{layoutSize: '140%', currentCity: cityObj.code}"
              @mapNameChange="mapNameChange"
            ></map-box>
            <div class="map-address">辽宁省{{ cityObj.name ? `-${cityObj.name}` : '' }}</div>
          </div>
          <div class="local-city-every-area-house-property-acreage-supply-statistics" style="margin: 0">
            <div class="main-content-gird-title sals-ranking-situation">
              <div class="title-row">
                <img class="main-content-gird-title-logo"
                     src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                     alt=""/>
                <p style="white-space: nowrap;">各地区销售情况排名</p>
              </div>
              <time-filtrate-public class="time-filtrate-public" :defaultCurrentCity="cityObj.code"
                                    :cityAndAreaList="cityAndAreaList" style="max-width: 360px"
                                    @changeFiltrateTime="changeFiltrateTime($event, 'everyAreaSaleSituationRanking')"></time-filtrate-public>
            </div>
            <div class="module-title-content-middle-line" style="margin-bottom: 0px;"></div>
            <div class="house-property-sales-trend-analysis-tabs">
              <el-tabs v-model="currentHouseSaleDateTab"
                       @tab-change="changeHouseSaleDateTab">
                <el-tab-pane v-for="(item, index) of houseSaleTabs" :key="item.value"
                             :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
            </div>
            <table class="my-table">
              <thead class="table_h">
              <tr class="table_th">
                <th>排名</th>
                <th>城市</th>
                <th>{{ currentMetricLabel }}</th>
                <th>同比增长率</th>
                <th>环比增长率</th>
              </tr>
              </thead>
              <tbody style="flex: 1">
              <div v-if="tableListLoading" v-loading="tableListLoading" class="table-loading"
                   style="height: 100%"></div>
              <vue3-seamless-scroll v-else :list="salesTableData" direction="up" :hover="true" :limitScrollNum="1"
                                    :step="step"
                                    class="seamless-warp">
                <tr class="table_td" v-for="(item, index) in salesTableData" :key="index">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.name }}</td>
                  <td>
                    <el-progress :percentage="maxCurrentMetricRef ? (item.numerical / maxCurrentMetricRef) * 100 : 0" :text-inside="true"
                                 :color="gradientColor" :stroke-width="16"><span>{{ item.numerical }}{{ item.unit }}</span>
                    </el-progress><!--   maxCurrentMetricRef 分母为零不执行   -->
                  </td>
                  <td>{{ item.yoy || '--' }}%</td>
                  <td>{{ item.chain || '--' }}%</td>
                </tr>
              </vue3-seamless-scroll>
              </tbody>
            </table>
          </div>
          <div class="local-city-every-area-house-property-loan-impact-analysis">
            <div class="main-content-gird-title">
              <div class="title-row">
                <img class="main-content-gird-title-logo"
                     src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                     alt=""/>
                <p style="white-space: nowrap;">贷款影响分析</p>
              </div>
              <CityPicker class="house-property-sales-select" v-model="currentLoanCity"
                          @update:cityValue="handleLoanCityPickerChange"></CityPicker>
            </div>
            <div class="module-title-content-middle-line" style="margin-bottom: 11px;"></div>
            <el-row :gutter="10" style="z-index: 1">
              <el-col :span="12">
                <span>贷款走势</span>
                <div class="loan-effect-analysis-chart">
                  <line-new :line-data="loanTrendData" class="h180" ref="loanTrend"
                            @click="fullSc('lineNew', loanTrendData, 'loanTrend')"></line-new>
                </div>
              </el-col>
              <el-col :span="12">
                <span>剩余贷款统计</span>
                <div class="loan-effect-analysis-chart">
                  <pie v-if="remainLoanStatisticsData.seriesData?.length" ref="remainLoanStatistics"
                       :pieData="remainLoanStatisticsData" class="h220"
                       @click="fullSc('pie', remainLoanStatisticsData, 'residualLoanStatistics')"></pie>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="analysis-row">
            <div class="listing-situation-analysis" style="position: relative">
              <div class="main-content-gird-title">
                <div class="title-row"><img class="main-content-gird-title-logo"
                                            src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                                            alt=""/>
                  <p style="white-space: nowrap;">上市情况分析</p></div>
                <time-filtrate-public class="time-filtrate-public" :defaultCurrentCity="cityObj.code"
                                      :cityAndAreaList="cityAndAreaList" style="max-width: 360px"
                                      @changeFiltrateTime="changeFiltrateTime($event, 'listingSituationAnalysis')"></time-filtrate-public>
              </div>
              <div class="module-title-content-middle-line" style="margin-bottom: 11px;"></div>
              <div class="house-type-and-acreage-filtrate">
                <span>商品房供销分布</span>
                <div class="house-type-and-acreage-filtrate-item">
                  <el-select class="house-property-sales-select" v-model="selectedPublicHouseType" size="small"
                             @change="changePublicHouseType" style="margin-right: 10px;">
                    <el-option
                      v-for="item in houseTypeList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.name"
                      class="custom-select-option"
                    />
                  </el-select>
                  <el-select class="house-property-sales-select" v-model="selectedPublicHouseArea" size="small"
                             @change="changePublicHouseArea">
                    <el-option
                      v-for="item in areaTypeList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                      class="custom-select-option"
                    />
                  </el-select>
                </div>
              </div>
              <div class="title-row">
                <span style="margin-right: 10px;font-size: 12px;">可售面积{{ publicStatisticsTopInfo.area }}m² 同比<span
                  :class="Number(publicStatisticsTopInfo.areaYoy) >= 0 ? 'cl-5c' : 'cl-c4'"
                >{{ Number(publicStatisticsTopInfo.areaYoy) >= 0 ? "↑" : "↓" }}{{ publicStatisticsTopInfo.areaYoy }}%</span
                ><span :class="Number(publicStatisticsTopInfo.areaMom) >= 0 ? 'cl-5c' : 'cl-c4'"
                > 环比{{ Number(publicStatisticsTopInfo.areaMom) >= 0 ? "↑" : "↓" }}{{ publicStatisticsTopInfo.areaMom }}%</span
                ></span>
                <span style="margin-right: 10px;font-size: 12px;">可售套数{{ publicStatisticsTopInfo.houseNumber }}套 同比<span
                  :class="Number(publicStatisticsTopInfo.houseNumberYoy) >= 0 ? 'cl-5c' : 'cl-c4'"
                >{{ Number(publicStatisticsTopInfo.houseNumberYoy) >= 0 ? "↑" : "↓" }}{{ publicStatisticsTopInfo.houseNumberYoy }}%</span
                ><span :class="Number(publicStatisticsTopInfo.houseNumberMom) >= 0 ? 'cl-5c' : 'cl-c4'"
                > 环比{{ Number(publicStatisticsTopInfo.houseNumberMom) >= 0 ? "↑" : "↓" }}{{ publicStatisticsTopInfo.houseNumberMom }}%</span
                ></span>
              </div>
              <div class="listing-situation-analysis-chart">
                <markScatter
                  v-if="publicStatisticsData.seriesData?.[0]?.length || publicStatisticsData.seriesData?.[1]?.length"
                  ref="publicStatistics"
                  :scatterData="publicStatisticsData" class="h180"
                  @click="fullSc('markScatter', publicStatisticsData, 'listingSituationAnalysis')"
                ></markScatter>
              </div>
            </div>
          </div>
          <div class="economic-data-statistics">
            <div class="economic-data-statistics__title">
              <div class="main-content-gird-title" style="justify-content: space-between">
                <div class="main-content-gird-title-economic-statistics">
                  <div class="title-row"><img class="main-content-gird-title-logo"
                                              src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                                              alt=""/>
                    <p>税收情况分析</p></div>
                  <time-filtrate-public class="time-filtrate-public" :defaultCurrentCity="cityObj.code"
                                        :cityAndAreaList="cityAndAreaList" style="max-width: 360px"
                                        @changeFiltrateTime="changeFiltrateTime($event, 'taxAnalysis')"></time-filtrate-public>
                </div>
              </div>
            </div>
            <div class="module-title-content-middle-line" style="margin-bottom: 11px;"></div>
            <div>
              <el-row :gutter="10" style="z-index: 1">
                <el-col :span="12">
                  <span>房地产各项税收占比统计</span>
                  <div class="tax-analysis-chart">
                    <pie2 v-if="taxRatioStatisticsData.seriesData?.length" ref="taxRatioStatistics"
                          :pieData="taxRatioStatisticsData" class="h180"
                          @click="fullSc('pie2', taxRatioStatisticsData, 'taxSituationAnalysisLeft')"></pie2>
                  </div>
                </el-col>
                <el-col :span="12">
                  <span>房地产相关税收占一般公共预算收入统计</span>
                  <div class="tax-analysis-chart">
                    <pie2 v-if="taxPublicBudgetStatisticsData.seriesData?.length" ref="taxPublicBudgetStatistics"
                          :pieData="taxPublicBudgetStatisticsData" class="h180"
                          @click="fullSc('pie2', taxPublicBudgetStatisticsData, 'taxSituationAnalysisRight')"></pie2>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="house-property-sales-status-statistics">
            <div class="main-content-gird-title" style="padding-bottom: 6px;">
              <img class="main-content-gird-title-logo"
                   src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                   alt=""/>
              <p>房地产资金流向检测</p>
            </div>
            <div class="module-title-content-middle-line" style="margin-bottom: 11px;"></div>
            <div class="house-property-fund-flow-detection-chart">
              <line-new v-if="housePropertyFundFlowAnalysisData.seriesData?.length"
                        :line-data="housePropertyFundFlowAnalysisData" class="h230"
                        ref="housePropertyFundFlowAnalysis"
                        @click="fullSc('lineNew', housePropertyFundFlowAnalysisData, 'fundFlowDetection')"
              ></line-new>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog v-model="magnifyData.dialogVisible" :width="magnifyData.dialogWidth" :top="magnifyData.dialogTop">
      <component
        v-if="magnifyData.dialogVisible"
        ref="dialogRef"
        :is="magnifyData.componentName"
        :dialogData="{
          fontSizeTimes: 2
        }"
        v-bind="{...magnifyData.props}"
        @dialogEmit="dialogEmit"
      ></component>
    </el-dialog>

  </div>
</template>

<script>
import publicPie from '@/components/housePropertyTradeAnalysis/pie/publicPie.vue'
import lineNew from '@/components/housePropertyTradeAnalysis/line/lineNew.vue'
import bar from '@/components/housePropertyTradeAnalysis/bar/barOne.vue'
import pie from '@/components/housePropertyTradeAnalysis/pie/taxOne.vue'
import markScatter from '@/components/housePropertyTradeAnalysis/markScatter/index.vue'
import pie2 from '@/components/housePropertyTradeAnalysis/pie/taxTwo.vue'

export default {
  components: {
    publicPie,
    lineNew,
    bar,
    pie,
    markScatter,
    pie2
  }
}
</script>
<script setup>
import {onMounted, ref, computed, inject, nextTick, onUnmounted, onBeforeMount} from "vue";
import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
import mapBox from "@/components/housePropertyTradeAnalysis/map/index.vue";
import tableList from "@/components/housePropertyAnalysis/statistics/tableList.vue";
import acreageTabBg from "@/assets/img/housePropertyAnalysis/statistics/acreage-tab-bg.png"
import chosenAcreageTabBg from "@/assets/img/housePropertyAnalysis/statistics/chosen-acreage-tab-bg.png"
import cityPicker from '@/components/housePropertyTradeAnalysis/cityPicker/index.vue'
import timeFiltratePublic from "@/components/housePropertyTradeAnalysis/timeFiltratePublic.vue";
import { useRouter } from "vue-router";

import {
  realEstateMarketSupplySituationLeft, // 房地产市场供应情况-左
  realEstateMarketSupplySituationRight, // 房地产市场供应情况-右
  getSalesSituation, // 各地房地产市场销售情况
  supplySalesSituation,  // 房地产市场供销情况
  salesSituationRank, // 各地区销售情况排名
  loanImpactAnalysis, // 贷款影响分析-贷款走势
  loanImpactStatistics, // 贷款影响分析-剩余贷款统计
  listingSituationAnalysisValue, // 上市情况分析-上
  listingSituationAnalysis, // 上市情况分析-下
  taxEveryItemAnalysis, // 税收情况分析-房地产各项税收占比统计
  taxEveryBudgetAnalysis, // 税收情况分析-房地产相关税收占一般公共预算收入统计
  fundFlowAnalysis // 房地产资金流向监测
} from '@/api/housePropertyTradeAnalysis'
import {getSupplyDemandGetRegion} from "@/api/housePropertyAnalysis/analysis/index";
import {pxToRem} from "@/utils/index";

const router = useRouter();

const cityAndAreaList = ref([]) // 公共顶部时间筛选城市区列表
const cityObj = ref({
  name: '',
  code: '210000'
})
const maxCurrentMetric = ref(null) // 排名最大数值
const salesTable = ref(null) // 各地区销售情况排名-tableData
const gradientColor = ref('linear-gradient(to right, #0E5FFF, #00FFFF)')
const step = ref('0')

const magnifyData = ref({ // chart图放大data
  dialogVisible: false,
  componentName: '',
  componentParams: {},
  dialogWidth: '',
  props: {},
  dialogTop: '',
  moduleName: ''
})

const cityList = ref([
  {name: '辽宁省', code: '210000'},
  {name: '沈阳市', code: '210100'},
  {name: '大连市', code: '210200'},
  {name: '鞍山市', code: '210300'},
  {name: '抚顺市', code: '210400'},
  {name: '本溪市', code: '210500'},
  {name: '丹东市', code: '210600'},
  {name: '锦州市', code: '210700'},
  {name: '营口市', code: '210800'},
  {name: '阜新市', code: '210900'},
  {name: '辽阳市', code: '211000'},
  {name: '盘锦市', code: '211100'},
  {name: '铁岭市', code: '211200'},
  {name: '朝阳市', code: '211300'},
  {name: '葫芦岛市', code: '211400'},
])


const trendList = ref([
  {value: 1, name: '各地成交面积走势'},
  {value: 2, name: '各地成交金额走势'},
  {value: 3, name: '各地成交均价走势'},
  {value: 4, name: '各地预售面积走势'},
  {value: 5, name: '各地价格指数走势'},
  {value: 6, name: '各地租赁均价走势'},
  {value: 7, name: '各地吸纳量走势'},
  {value: 8, name: '各地吸纳率走势'},
  {value: 9, name: '各地吸纳周期走势'}
])

const smTrendList = ref([
  {value: 1, name: '商品房销售面积走势'},
  {value: 2, name: '二手房销售面积走势'},
  {value: 3, name: '房地产库存走势'},
  {value: 4, name: '新房供应量走势'}
])

const houseTypeList = ref([ // 户型select-list
  {value: 0, name: '全部户型'},
  {value: 1, name: '一居室'},
  {value: 2, name: '二居室'},
  {value: 3, name: '三居室'},
  {value: 4, name: '四居室'},
  {value: 5, name: '五居室'}
])

const areaTypeList = ref([ // 面积select-list
  {value: 0, name: '全部面积'},
  {value: '60-0', name: '60平以下'},
  {value: '60-90', name: '60-90平'},
  {value: '90-120', name: '120-144平'},
  {value: '144-180', name: '144-180平'},
  {value: '180-', name: '180平以上'},
])
const currentSaleDateTab = ref(1)
const saleDateTab = ref([ // 房地产市场销售日期tab
  {
    value: 1,
    label: '按天',
  },
  {
    value: 4,
    label: '按周',
  },
  {
    value: 2,
    label: '按月'
  },
  {
    value: 3,
    label: '按年'
  }
])

const housePropertySupplyDemandTrend = ref(null)
const housePropertySupplyDemandTrendData = ref({ // 房地产市场供销情况
  legendData: [],
  xAxisData: [],
  barData: [],
  lineData: [],
})
const housePropertyLandSupplyStatistics = ref(null) // 新增房屋建筑面积情况-dom-ref
const housePropertyHouseInventoryStatistics = ref(null) // 待售房屋供应情况-dom-ref
const tableListLoading = ref(true)

const housePropertyMarketSales = ref(null) // 房地产市场销售情况-domref
const housePropertyMarketSalesData = ref({ // 房地产市场销售情况
  seriesData: [],
  xAxisData: [],
  yAxisName: '面积：万㎡'
})

const loanTrend = ref(null) // 贷款影响分析-贷款走势-domref
const loanTrendData = ref({ // 贷款影响分析-贷款走势
  seriesData: [],
  xAxisData: [],
  yAxisName: '贷款总额(万元)',
  legendConfig: {
    normal: {
      left: pxToRem(80),
      top: pxToRem(-10)
    },
    magnifyDialog: {
      left: 'center',
      top: pxToRem(0)
    }
  },
  gridConfig: {
    normal: {
      top: pxToRem(70)
    },
    magnifyDialog: {
      top: pxToRem(70)
    }
  },
  yAxisConfig: {
    nameTextStyle: {
      normal: {
        padding: [0, 0, 0, pxToRem(0)],
      },
      magnifyDialog: {
        padding: [0, 0, 0, pxToRem(30)],
      }
    }
  },
})

const remainLoanStatisticsData = ref({ //  剩余贷款统计
  seriesData: []
})
const remainLoanStatistics = ref(null) //  剩余贷款统计-domref

const publicStatisticsData = ref({ // 上市情况分析-chartData
  seriesData: [],
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: '',
})
const publicStatistics = ref(null) // 上市情况分析-下-domref
const publicStatisticsTopInfo = ref({ // 上市情况分析--顶部信息
  area: '',
  areaYoy: '',
  areaMom: '',
  HouseNum: '',
  HouseNumYoy: '',
  HouseNumMom: '',
})

const taxRatioStatisticsData = ref({ //  税收情况分析-各项税收占比统计
  seriesData: [],
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: '',
})
const taxRatioStatistics = ref(null) //  各项税收占比统计

const taxPublicBudgetStatisticsData = ref({ //  税收情况分析-税收占一般公共预算收入统计
  seriesData: []
})
const taxPublicBudgetStatistics = ref(null) //  税收占一般公共预算收入统计

const salesTableData = ref([])
const everyAreaSaleSituationRankingFiltrateData = ref({ // 各地区销售情况排名-筛选data
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: '',
})

const currentMetricLabel = ref('销售面积')
const housePropertyLandSupplyStatisticsData = ref({ // 房地产土地供应统计-新增房屋建筑面积情况-data
  title: '新增房屋建筑面积情况',
  sumTitle: '新增房屋建筑总面积',
  sumAcreage: null,
  sumPercentage: null,
  typeList: [ // 新增房屋建筑面积情况-types
    {
      label: '规划',
      color: '#0E5FFF'
    },
    {
      label: '未开工',
      color: '#01C4D2'
    },
    {
      label: '在建',
      color: '#E65992'
    }
  ],
  seriesData: [],
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: '',
})

const housePropertyHouseInventoryStatisticsData = ref({ // 房地产房屋库存统计-待售房屋供应情况-data
  title: '待售房屋供应情况',
  sumTitle: '待售房屋供应面积',
  sumAcreage: null,
  sumPercentage: null,
  typeList: [
    {
      label: '已建未售',
      color: '#0e5fff',
      show: true,
      apiResValue: 'yjws'
    },
    {
      label: '二手房',
      color: '#01c4d2',
      show: true,
      apiResValue: 'es'
    },
    {
      label: '法拍房',
      color: '#e65992',
      show: true,
      apiResValue: 'fpf'
    },
    {
      label: '预售待售',
      color: '#ff8569',
      show: true,
      apiResValue: 'ysds'
    },
    {
      label: '待售',
      color: '#5abe52',
      show: true,
      apiResValue: 'ds'
    },
    {
      label: '停缓建',
      color: '#ffc352',
      show: true,
      apiResValue: 'thj'
    },
  ],
  seriesData: [],
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: '',
})
const selectedSmHouseType = ref('全部户型') // 供销情况户型选择
const selectedSmHouseArea = ref('全部面积') // 供销情况面积选择
const selectedPublicHouseType = ref('全部户型') // 上市情况户型选择
const selectedPublicHouseArea = ref(0) // 上市情况面积选择

const currentHouseSaleDateTab = ref(1) // 各地区销售情况排名-tab-model
const houseSaleTabs = ref([ // 各地区销售情况tabs
  {
    label: '销售面积',
    value: 1,
  },
  {
    label: '销售金额',
    value: 2,
  },
  {
    label: '价格指数',
    value: 3,
  }
])
const mapList = ref([
  {name: '沈阳市', value: 0, code: '210100', select: {disabled: false}, selected: false},
  {name: '大连市', value: 0, code: '210200', select: {disabled: false}, selected: false},
  {name: '鞍山市', value: 0, code: '210300', select: {disabled: false}, selected: false},
  {name: '抚顺市', value: 0, code: '210400', select: {disabled: false}, selected: false},
  {name: '本溪市', value: 0, code: '210500', select: {disabled: false}, selected: false},
  {name: '丹东市', value: 0, code: '210600', select: {disabled: false}, selected: false},
  {name: '锦州市', value: 0, code: '210700', select: {disabled: false}, selected: false},
  {name: '营口市', value: 0, code: '210800', select: {disabled: false}, selected: false},
  {name: '阜新市', value: 0, code: '210900', select: {disabled: false}, selected: false},
  {name: '辽阳市', value: 0, code: '211000', select: {disabled: false}, selected: false},
  {name: '盘锦市', value: 0, code: '211100', select: {disabled: false}, selected: false},
  {name: '铁岭市', value: 0, code: '211200', select: {disabled: false}, selected: false},
  {name: '朝阳市', value: 0, code: '211300', select: {disabled: false}, selected: false},
  {name: '葫芦岛市', value: 0, code: '211400', select: {disabled: false}, selected: false},
])

const currentSmCity = ref(cityObj.value.code) // 当前城市-供销情况
const currentLoanCity = ref(cityObj.value.code) // 当前城市-贷款情况
const trendType = ref(1) // 走势类型-销售情况
const smTrendType = ref(1) // 走势类型-供销情况
const trendCity = ref([cityObj.value.code]) // 当前城市多选-销售情况

const housePropertyFundFlowAnalysis = ref(null) // 房地产资金流向监测
const housePropertyFundFlowAnalysisData = ref({ // 房地产资金流向监测
  seriesData: [],
  xAxisData: [],
  yAxisName: '金额(万元)'
})

const maxCurrentMetricRef = computed(() => {
  return Math.max(...salesTableData.value.map((row) => row.numerical));
});

const calculateStep = () => {
  // 获取视口的高度
  const viewportHeight = window.innerHeight;
  if (salesTableData.value.length > 5) {
    step.value = viewportHeight * 0.0003;
  }
};

const initHousePropertyMarketSalesData = () => { // 房地产市场销售情况
  getSalesSituation({
    dimension: trendType.value, timeDimension: currentSaleDateTab.value, xzqhdms: trendCity.value
  }).then(res => {
    const resData = res?.data
    housePropertyMarketSalesData.value.xAxisData = resData?.X
    housePropertyMarketSalesData.value.seriesData = resData?.Y.map(x => {
      return {
        type: 'line',
        smooth: true,
        showSymbol: false,
        data: x.numericalMap.map((y, yIndex) => {
          return {
            value: y,
            percentageYoy: x?.yoyMap?.[yIndex],
            percentageMom: x?.momMap?.[yIndex]
          }
        }),
        name: x.name
      }
    })
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (housePropertyMarketSalesData.value.seriesData?.length) {
      nextTick(() => {
        housePropertyMarketSales.value?.updateChart();
      })
    }
  })
}

const initHousePropertyMarketSmData = () => { // 房地产市场供销情况
  supplySalesSituation({
    dimension: smTrendType.value,
    hx: selectedSmHouseType.value === '全部户型' ? '' : selectedSmHouseType.value,
    mjlx: selectedSmHouseArea.value === '全部面积' ? '' : selectedSmHouseArea.value,
    xzqhdms: currentSmCity.value
  }).then(res => {
    const resData = res?.data
    const resDataY = resData.Y[0]
    housePropertySupplyDemandTrendData.value.xAxisData = resData?.X;
    housePropertySupplyDemandTrendData.value.barData = resDataY.numericalMap;
    housePropertySupplyDemandTrendData.value.lineData = [resDataY.yoyMap,
      resDataY.chainMap];
    housePropertySupplyDemandTrendData.value.legendData = [
      {
        name: '销售套数',
        icon: 'rect',
        itemStyle: {
          color: '#E65992'
        }
      },
      {
        name: '同比增长率',
        icon: 'rect',
        itemStyle: {
          color: '#0E81FF'
        },
      },
      {
        name: '环比增长率',
        icon: 'rect',
        itemStyle: {
          color: '#F8F364'
        },
      }
    ]
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    nextTick(() => {
      housePropertySupplyDemandTrend.value?.updateChart();
    })
  })
}

const initLoanTrendData = () => { //  贷款影响分析-贷款走势
  loanImpactAnalysis({
    xzqhdm: currentLoanCity.value,
  }).then(res => {
    const resData = res?.data
    loanTrendData.value.xAxisData = resData?.X
    loanTrendData.value.seriesData = resData?.Y.map(x => {
      return {
        type: 'line',
        smooth: true,
        showSymbol: false,
        data: x.numericalMap.map((y, yIndex) => {
          return {
            value: y,
            percentageYoy: x?.yoyMap?.[yIndex],
            percentageMom: x?.momMap?.[yIndex]
          }
        }),
        name: x.name
      }
    })
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (loanTrend.value) {
      nextTick(() => {
        loanTrend.value?.updateChart();
      })
    }
  })
}

const initRemainLoanStatisticsData = () => { //  剩余贷款统计
  loanImpactStatistics({xzqhdm: currentLoanCity.value,}).then(res => {
    const resData = res?.data
    const remainData = resData.map(item => ({
      ...item,
      value: item.numerical,
    }));
    remainLoanStatisticsData.value.seriesData = remainData
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (remainLoanStatistics.value) {
      nextTick(() => {
        remainLoanStatistics.value?.updateChart();
      })
    }
  })
}

const initPublicAnalysisData = () => {// 上市情况分析-上
  const params = {
    xzqhdm: publicStatisticsData.value.areaCode,
    timeDimension: publicStatisticsData.value.type,
    startYearMonth: publicStatisticsData.value.startTime,
    endYearMonth: [1, 2].includes(publicStatisticsData.value.type) ? publicStatisticsData.value.startTime : publicStatisticsData.value.endTime,
    hx: selectedPublicHouseType.value == '全部户型' ? '' : selectedPublicHouseType.value,
    mj: selectedPublicHouseArea.value == 0 ? '' : selectedPublicHouseArea.value
  }
  listingSituationAnalysisValue(params).then(res => {
    const resData = res?.data
    const {ksmjDe, kstsDe} = resData
    publicStatisticsTopInfo.value.area = ksmjDe?.numerical
    publicStatisticsTopInfo.value.areaYoy = ksmjDe?.yoy
    publicStatisticsTopInfo.value.areaMom = ksmjDe?.chainBase
    publicStatisticsTopInfo.value.houseNumber = kstsDe?.numerical
    publicStatisticsTopInfo.value.houseNumberYoy = kstsDe?.yoy
    publicStatisticsTopInfo.value.houseNumberMom = kstsDe?.chainBase
  })
}


const initPublicStatisticsData = () => { // 上市情况分析-下-chartt
  const params = {
    xzqhdm: publicStatisticsData.value.areaCode,
    timeDimension: publicStatisticsData.value.type,
    startYearMonth: publicStatisticsData.value.startTime,
    endYearMonth: [1, 2].includes(publicStatisticsData.value.type) ? publicStatisticsData.value.startTime : publicStatisticsData.value.endTime,
    hx: selectedPublicHouseType.value == '全部户型' ? '' : selectedPublicHouseType.value,
    mj: selectedPublicHouseArea.value == 0 ? '' : selectedPublicHouseArea.value
  }
  listingSituationAnalysis(params).then(res => {
    const resData = res?.data
    publicStatisticsData.value.seriesData = resData?.value
  }).finally(_ => {
    if (publicStatistics.value) {
      publicStatistics.value.updateChart();
    }
  })
}

const initTaxRatioStatisticsData = () => { //  各项税收占比统计
  const params = {
    xzqhdm: taxRatioStatisticsData.value.areaCode,
    timeDimension: taxRatioStatisticsData.value.type,
    startYearMonth: taxRatioStatisticsData.value.startTime,
    endYearMonth: [1, 2].includes(taxRatioStatisticsData.value.type) ? taxRatioStatisticsData.value.startTime : taxRatioStatisticsData.value.endTime,
  }
  taxEveryItemAnalysis(params).then(res => {
    const resData = res?.data
    if (resData?.length > 0) {
      const newData = resData.map(item => ({
        ...item,
        value: item.proportion
      }))
      taxRatioStatisticsData.value.seriesData = newData
    }
  }).finally(_ => {
    if (taxRatioStatistics.value) {
      nextTick(() => {
        taxRatioStatistics.value.updateChart();
      })
    }
  })
}

const initTaxPublicBudgetStatisticsData = () => { //  税收占一般公共预算收入统计
  const params = {
    xzqhdm: taxRatioStatisticsData.value.areaCode,
    timeDimension: taxRatioStatisticsData.value.type,
    startYearMonth: taxRatioStatisticsData.value.startTime,
    endYearMonth: [1, 2].includes(taxRatioStatisticsData.value.type) ? taxRatioStatisticsData.value.startTime : taxRatioStatisticsData.value.endTime,
  }
  taxEveryBudgetAnalysis(params).then(res => {
    const resData = res?.data
    if (resData?.length > 0) {
      const newData = resData.map(item => ({
        ...item,
        value: item.proportion
      }))
      taxPublicBudgetStatisticsData.value.seriesData = newData
    }
  }).finally(_ => {
    if (taxPublicBudgetStatistics.value) {
      nextTick(() => {
        taxPublicBudgetStatistics.value.updateChart();
      })
    }
  })
}

const initHousePropertyMarketSupplyLeft = () => {// 房地产市场供应情况-左
  const params = {
    xzqhdm: housePropertyLandSupplyStatisticsData.value.areaCode,
    timeDimension: housePropertyLandSupplyStatisticsData.value.type,
    startYearMonth: housePropertyLandSupplyStatisticsData.value.startTime,
    endYearMonth: [1, 2].includes(housePropertyLandSupplyStatisticsData.value.type) ? housePropertyLandSupplyStatisticsData.value.startTime : housePropertyLandSupplyStatisticsData.value.endTime
  }
  realEstateMarketSupplySituationLeft(params).then(res => {
    const resData = res?.data
    housePropertyLandSupplyStatisticsData.value.seriesData = resData?.map(x => {
      return {
        ...x,
        name: `${x.typeName}-${x.property}`,
        value: x.area,
        percentageYoy: x.areaTb,
        percentageMom: x.areaHb
      }
    })
  }).finally(_ => {
    if (housePropertyLandSupplyStatistics.value) {
      nextTick(() => {
        housePropertyLandSupplyStatistics.value.updateChart();
      })
    }
  })
}

const initHousePropertyMarketSupplyRight = () => {// 房地产市场供应情况-右
  const params = {
    xzqhdm: housePropertyLandSupplyStatisticsData.value.areaCode,
    timeDimension: housePropertyLandSupplyStatisticsData.value.type,
    startYearMonth: housePropertyLandSupplyStatisticsData.value.startTime,
    endYearMonth: [1, 2].includes(housePropertyLandSupplyStatisticsData.value.type) ? housePropertyLandSupplyStatisticsData.value.startTime : housePropertyLandSupplyStatisticsData.value.endTime
  }
  realEstateMarketSupplySituationRight(params).then(res => {
    const resData = res?.data
    housePropertyHouseInventoryStatisticsData.value.seriesData = resData?.map(x => {
      return {
        ...x,
        name: `${x.typeName}-${x.property}`,
        value: x.area,
        percentageYoy: x.areaTb,
        percentageMom: x.areaHb
      }
    })
  }).finally(_ => {
    if (housePropertyHouseInventoryStatistics.value) {
      nextTick(() => {
        housePropertyHouseInventoryStatistics.value.updateChart();
      })
    }
  })
}

const initSalesSituationRank = () => { // 各地区销售情况排名
  const params = {
    dimension: currentHouseSaleDateTab.value,
    xzqhdm: everyAreaSaleSituationRankingFiltrateData.value.areaCode,
    timeDimension: everyAreaSaleSituationRankingFiltrateData.value.type,
    startYearMonth: everyAreaSaleSituationRankingFiltrateData.value.startTime,
    endYearMonth: [1, 2].includes(everyAreaSaleSituationRankingFiltrateData.value.type) ? everyAreaSaleSituationRankingFiltrateData.value.startTime : everyAreaSaleSituationRankingFiltrateData.value.endTime
  }
  tableListLoading.value = true
  salesSituationRank(params).then(res => {
    const resData = res?.data
    if (resData?.length) {
      salesTableData.value = resData?.map(x => {
        return {
          ...x,
          unit: currentHouseSaleDateTab.value === 1
            ? '万㎡'
            : currentHouseSaleDateTab.value === 2 ? '万元' : ''
        }
      })
    }
  }).finally(_ => {
    tableListLoading.value = false
    calculateStep();
  })
}

const initHousePropertyFundFlowAnalysis = () => {//房地产资金流向监测
  fundFlowAnalysis({xzqhdm: cityObj.value.code}).then(res => {
    const resData = res?.data
    housePropertyFundFlowAnalysisData.value.xAxisData = resData?.X
    housePropertyFundFlowAnalysisData.value.seriesData = resData?.Y.map(x => {
      return {
        type: 'line',
        smooth: true,
        showSymbol: false,
        data: x.numericalMap.map((y, yIndex) => {
          return {
            value: y,
            percentageYoy: x?.yoyMap?.[yIndex],
            percentageMom: x?.momMap?.[yIndex]
          }
        }),
        name: x.name
      }
    })
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    nextTick(() => {
      housePropertyFundFlowAnalysis.value?.updateChart();
    })
  })
}

const changeSaleDateTab = (newValue) => { // 切换各地房地产市场销售情况tab
  currentSaleDateTab.value = newValue
  initHousePropertyMarketSalesData()
}
const changeHouseSaleDateTab = (newValue) => { // 切换各地区销售情况排名tab
  currentHouseSaleDateTab.value = newValue
  currentMetricLabel.value = houseSaleTabs.value.filter(item => item.value == newValue)[0].label
  initSalesSituationRank()
}

const mapNameChange = (data) => { // 地图点击触发
  cityObj.value.name = cityObj.value.name == data.cityName ? '' : data.cityName;
  cityObj.value.code = cityObj.value.code == data.cityCode ? '210000' : data.cityCode;
  publicStatisticsData.value.areaCode = cityObj.value.code
  taxRatioStatisticsData.value.areaCode = cityObj.value.code
  everyAreaSaleSituationRankingFiltrateData.value.areaCode = cityObj.value.code
  housePropertyLandSupplyStatisticsData.value.areaCode = cityObj.value.code
  currentLoanCity.value = cityObj.value.code // 贷款影响分析
  currentSmCity.value = cityObj.value.code // 房地产市场供销情况
  mapList.value.forEach(x => {
    if (x.code === data.cityCode) {
      x.selected = true
      if (data.cancelCurrentCity) {
        x.selected = false
      }
    } else {
      x.selected = false
    }
  })
  initPage();
}
const handleSmCityPickerChange = (newValue) => { // select切换城市-供销情况
  initHousePropertyMarketSmData()
}
const handleLoanCityPickerChange = (newValue) => { // select切换城市-贷款情况
  initLoanTrendData()
  initRemainLoanStatisticsData()
}
const changeTrendType = (item) => { // select切换类型-销售情况
  trendType.value = item
  initHousePropertyMarketSalesData()
}
const changeSmTrendType = (item) => { // select切换类型-供销情况
  smTrendType.value = item
  initHousePropertyMarketSmData()
}
const changeSmHouseType = (item) => { // select切换类型-房屋户型
  selectedSmHouseType.value = item
  initHousePropertyMarketSmData()
}

const changeSmHouseArea = (item) => { // select切换类型-房屋面积
  selectedSmHouseArea.value = item
  initHousePropertyMarketSmData()
}
const changeTrendCity = (item) => { // select切换城市-销售情况
  trendCity.value = item
  initHousePropertyMarketSalesData()
}
const changePublicHouseType = (newValue) => { // select户型-上市情况
  initPublicAnalysisData();
  initPublicStatisticsData();
}
const changePublicHouseArea = (newValue) => { // select面积-上市情况
  initPublicAnalysisData();
  initPublicStatisticsData();
}

const getPublicList = () => { // 获取公共筛选区列表
  getSupplyDemandGetRegion({adcode: cityObj.value.code}).then(res => {
    const resData = res?.data
    if (resData?.length) {
      cityAndAreaList.value = resData?.map(x => {
        return {
          name: x.regionName,
          code: x.regionCode
        }
      })
    }
  }).catch(error => {
    console.log(error);
  })
}

const publicChangeFiltrateTime = (data, {areaCode, time, type}) => { // 公共处理-模块顶部公共筛选数据
  data.areaCode = areaCode || data.areaCode
  switch (type) {
    case 'month':
      data.type = 1
      data.startTime = time
      data.endTime = ''
      break;
    case 'year':
      data.type = 2
      data.startTime = time
      data.endTime = ''
      break;
    case 'monthrange':
      data.type = 3
      data.startTime = time[0]
      data.endTime = time[1]
      break;
  }
}

const changeFiltrateTime = (event, type) => { // 模块顶部城市时间筛选
  switch (type) {
    case 'housePropertyMarketSupplyStatistics': // 房地产市场供应情况
      publicChangeFiltrateTime(housePropertyLandSupplyStatisticsData.value, event);
      publicChangeFiltrateTime(housePropertyHouseInventoryStatisticsData.value, event);
      initHousePropertyMarketSupplyLeft() // 房地产市场供应情况-左
      initHousePropertyMarketSupplyRight() // 房地产市场供应情况-右
      break
    case 'listingSituationAnalysis': // 上市情况分析
      publicChangeFiltrateTime(publicStatisticsData.value, event);
      initPublicAnalysisData();
      initPublicStatisticsData(); // 上市情况分析-散点图
      break
    case 'taxAnalysis': // 税收情况分析
      publicChangeFiltrateTime(taxRatioStatisticsData.value, event);
      initTaxRatioStatisticsData() // 税收情况分析-左
      initTaxPublicBudgetStatisticsData() // 税收情况分析-右
      break
    case 'everyAreaSaleSituationRanking': // 各地区销售情况排名
      publicChangeFiltrateTime(everyAreaSaleSituationRankingFiltrateData.value, event);
      initSalesSituationRank() // 各地区销售情况排名-table
      break
  }
}

const fullSc = (componentName, componentParams, moduleName) => { // 放大chart图
  magnifyData.value.dialogTop = '25vh';
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  magnifyData.value.moduleName = moduleName;
  switch (componentName) {
    case 'publicPie': // 房地产市场供应情况-pie图
      magnifyData.value.props = {
        pieData: componentParams,
        class: 'h280 dialog-h280'
      };
      magnifyData.value.dialogWidth = '50%';
      magnifyData.value.dialogTop = '15vh';
      break;
    case 'lineNew': // 房地产市场销售情况-line图
      magnifyData.value.props = {
        lineData: componentParams,
        class: moduleName === 'fundFlowDetection' ? 'h230 dialog-h230' : 'h180 dialog-h180'
      };
      magnifyData.value.dialogWidth = '60%';
      magnifyData.value.dialogTop = '15vh';
      break;
    case 'bar': // 房地产市场销售情况-bar图
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h167 dialog-h167'
      };
      magnifyData.value.dialogWidth = '60%';
      magnifyData.value.dialogTop = '15vh';
      break;
    case 'pie': // 剩余贷款统计-bar图
      magnifyData.value.props = {
        pieData: componentParams,
        class: 'h220 dialog-h220'
      };
      magnifyData.value.dialogWidth = '50%';
      magnifyData.value.dialogTop = '15vh';
      break;
    case 'markScatter': // 上市情况分析-scatter图
      magnifyData.value.props = {
        scatterData: componentParams,
        class: 'h180 dialog-h180'
      };
      magnifyData.value.dialogWidth = '60%';
      magnifyData.value.dialogTop = '15vh';
      break;
    case 'pie2': // 税收情况分析-bar图
      magnifyData.value.props = {
        pieData: componentParams,
        class: 'h180 dialog-h180'
      };
      magnifyData.value.dialogWidth = '50%';
      magnifyData.value.dialogTop = '15vh';
      break;
  }
};

const handleCityPermission = (cityCode) => { // 处理城市权限
  if (cityCode) {
    cityObj.value.code = cityCode
    publicStatisticsData.value.areaCode = cityObj.value.code // 上市情况分析
    taxRatioStatisticsData.value.areaCode = cityObj.value.code // 税收情况分析
    everyAreaSaleSituationRankingFiltrateData.value.areaCode = cityObj.value.code // 各地区销售情况排名
    housePropertyLandSupplyStatisticsData.value.areaCode = cityObj.value.code // 房地产市场供应情况
    currentLoanCity.value = cityObj.value.code // 贷款影响分析
    currentSmCity.value = cityObj.value.code // 房地产市场供销情况
  }
  if (cityCode !== '210000') { // 单市
    cityObj.value.name = mapList.value.find(x => x.code === cityCode)?.name
    mapList.value.forEach(x => {
      if (x.code === cityCode) {
        x.selected = true
      } else {
        x.select.disabled = true
      }
    })
  }
}

const initPage = () => {
  initHousePropertyMarketSupplyLeft() // 房地产市场供应情况-左
  initHousePropertyMarketSupplyRight() // 房地产市场供应情况-右
  initSalesSituationRank() // 各地区销售情况排名
  initLoanTrendData() // 贷款走势
  initRemainLoanStatisticsData() // 剩余贷款统计
  initPublicAnalysisData() // 上市情况分析-上
  initPublicStatisticsData() // 上市情况分析-下
  initTaxRatioStatisticsData() // 各项税收占比统计
  initTaxPublicBudgetStatisticsData() // 税收占一般公共预算收入统计
  initHousePropertyMarketSalesData() // 房地产市场销售情况
  initHousePropertyMarketSmData() // 房地产市场供销情况
  initHousePropertyFundFlowAnalysis() // 房地产资金流向监测
}

onBeforeMount(() => {
  const permissionCityCode = localStorage.getItem('cityCode')
  if (permissionCityCode) handleCityPermission(permissionCityCode)
})

onMounted(() => {
  const date = new Date()
  const currentYear = date.getFullYear();
  housePropertyLandSupplyStatisticsData.value.startTime = currentYear - 1
  publicStatisticsData.value.startTime = currentYear - 1
  taxRatioStatisticsData.value.startTime = currentYear - 1
  everyAreaSaleSituationRankingFiltrateData.value.startTime = currentYear - 1
  initPage();
  getPublicList();
  window.addEventListener("resize", calculateStep);
});

onUnmounted(() => {
  window.removeEventListener("resize", calculateStep);
})
</script>

<style scoped lang="less">
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyAnalysis/statistics/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-title {
    width: 100vw;
    height: 85px;
    margin-bottom: 17px;
    background: url("@/assets/img/housePropertyAnalysis/statistics/header-bg@2x.png");
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 48px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    > span {
      font-size: 30px;
      margin-bottom: 20px;
      text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.6);
    }

    .top-tab {
      display: flex;

      .top-tab-left {
        position: absolute;
        top: 33px;
        left: 200px;
        display: flex;

        &-item {
          font-size: 20px;
          font-weight: bolder;
          padding: 7px 78px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        &-item:first-child {
          background: url("@/assets/img/housePropertyAnalysis/statistics/chosen-top-tab-bg@2x.png");
          background-size: 100% 100%;
        }

        &-item:last-child {
          background: url("@/assets/img/housePropertyAnalysis/statistics/top-tab-bg@2x.png");
          background-size: 100% 100%;
          margin-left: -25px;
        }
      }

      .top-tab-right {
        position: absolute;
        top: 33px;
        right: 375px;
        display: flex;
        align-items: center;

        &-item {
          font-size: 20px;
          font-weight: bolder;
          padding: 7px 78px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url("@/assets/img/housePropertyAnalysis/statistics/flip-horizontal-top-tab-bg@2x.png");
          background-size: 100% 100%;
          cursor: pointer;
        }

        span {
          position: absolute;
          font-size: 15px;
          right: -150px;
        }
      }
    }
  }

  .main-content {
    width: 100vw;
    padding: 0 50px;
    box-sizing: border-box;
    height: calc(100vh - 111px);
    position: relative;

    .next-page-btn {
      position: absolute;
      height: calc(100vh - 111px);
      right: 10px;
      font-size: 35px;
      svg {
        cursor: pointer;
      }
    }

    .main-content-gird-title {
      width: 100%;
      display: flex;
      align-items: center;

      &-logo {
        width: 20px;
        height: 20px;
        margin-right: 6px;
      }

      p {
        font-size: 18px;
      }

      &-economic-statistics {
        display: flex;
        align-items: center;
      }
    }

    .module-title-content-middle-line {
      width: 100% px;
      border: 1px solid;
      margin: 6px 0 21px;
      border-image: linear-gradient(297deg, rgba(97, 228, 255, 0), rgba(50, 197, 255, 1), rgba(102, 255, 255, 1), rgba(50, 197, 255, 1), rgba(50, 197, 255, 0)) 1 1;
    }

    .house-property-land-supply-statistics {
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg.png");
      background-size: 100% 100%;
      padding: 16px 11px 16px 16px;
      height: 360px;
      box-sizing: border-box;

      .title-row {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }

      .house-property-sales-select {
        z-index: 1;
        width: 160px;
      }

      .house-property-sales-select:not(:first-child) {
        margin-left: 10px;
      }

      .house-property-land-supply-statistics__left {
        //height: 174px;
        ::v-deep .content-title-right {
          .el-row .el-col:nth-of-type(2) {
            padding: 0 !important;
          }
        }

        > span {
          font-size: 14px;
        }
      }


      .house-property-land-supply-statistics__right {
        //height: 174px;
        > div:first-child {
          display: flex;
          justify-content: space-around;
          margin-bottom: 10px;
          flex-wrap: wrap;
        }

        &-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          width: 92px;
          height: 69px;
          box-sizing: border-box;
          cursor: pointer;

          p:nth-of-type(1) {
            font-size: 12px;
          }

          p:nth-of-type(2) {
            font-size: 14px;
            font-weight: bold;
          }

          p:nth-of-type(3) {
            font-size: 9px;
            display: flex;
            align-items: center;

            span {
              margin-right: 5px;
            }
          }
        }


        .house-property-sales-trend-analysis-tabs {
          position: relative;

          :deep(.el-tabs) {
            height: 46px;
            display: flex;
            align-items: center;

            .el-tabs__header {
              margin: 0;
            }

            .el-tabs__nav-wrap:after {
              height: 0;
            }

            .el-tabs__active-bar {
              height: 0;
            }

            .el-tabs__item {
              text-align: center;
              padding: 0 20px;
              font-size: 12px;
              height: 30px;
              box-shadow: inset 0px 0px 8px 0px #3D7FFF;
              border-radius: 8px;
              cursor: pointer;
              color: white;
            }

            .el-tabs__item:not(:last-child) {
              margin-right: 5px;
            }

            .el-tabs__item.is-active {
              background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
            }
          }

          .sale-row {
            display: flex;
            align-items: center;
          }
        }
      }

      .house-property-house-inventory-statistics__right {
        > span {
          font-size: 14px;
        }
      }

      .module-title-content-middle-line {
        margin-bottom: 5px;
      }
    }

    .time-pic {
      height: 31px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 8px;
      right: 0px;

      .time-com {
        padding-left: 15px;
        height: 16px;
        background: rgba(27, 126, 242, 0.2);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid rgba(41, 240, 250, 0.6);
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        letter-spacing: 1px;
        text-align: right;

        img {
          width: 9px;
          height: 6px;
          position: relative;
          bottom: 2px;
          margin-right: 4px;
        }
      }

      .time-com:hover {
        cursor: pointer;
      }
    }

    .local-city-every-area-house-property-acreage-supply-statistics {
      position: relative;
      margin-top: 20px;
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg.png");
      background-size: 100% 100%;
      padding: 16px 11px 25px 16px;
      height: fit-content;
      box-sizing: border-box;


      ::v-deep .el-table,
      ::v-deep .el-table__expanded-cell {
        background-color: transparent;
      }

      /* 表格内背景颜色 */

      ::v-deep .el-table th,
      ::v-deep .el-table tr,
      ::v-deep .el-table td {
        background-color: transparent;
        border: none;
        color: #fff;
      }

      /deep/ .el-table th.el-table__cell > .cell {
        color: #ffffff;
      }

      /deep/ .el-table td.el-table__cell,
      /deep/ .el-table th.el-table__cell.is-leaf {
        border: none;
      }

      /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
        background: none;
      }

      /deep/ .el-table__inner-wrapper::before {
        width: 0;
      }

      .time_row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }

      .house-property-sales-trend-analysis-tabs {
        position: relative;

        :deep(.el-tabs) {
          height: 46px;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .el-tabs__header {
            margin: 0;
          }

          .el-tabs__nav-wrap:after {
            height: 0;
          }

          .el-tabs__active-bar {
            height: 0;
          }

          .el-tabs__item {
            text-align: center;
            padding: 0 20px;
            font-size: 12px;
            height: 30px;
            box-shadow: inset 0px 0px 8px 0px #3D7FFF;
            border-radius: 8px;
            cursor: pointer;
            color: white;
          }

          .el-tabs__item:not(:last-child) {
            margin-right: 5px;
          }

          .el-tabs__item.is-active {
            background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
          }
        }
      }

      .house-property-sales-select:not(:first-child) {
        margin-left: 10px;
      }

      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .house-property-sales-trend-analysis-tabs {
        position: relative;

        :deep(.el-tabs) {
          height: 46px;
          display: flex;
          align-items: center;

          .el-tabs__header {
            margin: 0;
          }

          .el-tabs__nav-wrap:after {
            height: 0;
          }

          .el-tabs__active-bar {
            height: 0;
          }

          .el-tabs__item {
            text-align: center;
            padding: 0 20px;
            font-size: 12px;
            height: 30px;
            box-shadow: inset 0px 0px 8px 0px #3D7FFF;
            border-radius: 8px;
            cursor: pointer;
            color: white;
          }

          .el-tabs__item:not(:last-child) {
            margin-right: 5px;
          }

          .el-tabs__item.is-active {
            background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
          }
        }
      }

      .house-property-trend-row {
        display: flex;
        align-items: center;
        margin-top: 10px;
      }

      .house-property-sales-select {
        z-index: 1;
        width: 200px;

        :deep(.el-select__wrapper) {

          .el-tag {
            background-color: transparent;
          }

          .el-select__selected-item {
            color: white;
          }

          .el-select__tags-text {
            color: #fff;
          }

          .el-icon {
            color: #fff;
          }
        }
      }

      .house-property-acreage-tabs {
        position: absolute;
        right: 10px;
        top: 12px;
      }

      :deep(.el-tabs) {
        display: flex;
        align-items: center;

        .el-tabs__header {
          margin: 0;
        }

        .el-tabs__nav-wrap:after {
          height: 0;
        }

        .el-tabs__active-bar {
          height: 0;
        }

        .el-tabs__item {
          border-radius: 5px;
          text-align: center;
          height: 30px;
          color: white;
          background: #000022;
          box-shadow: inset 0px 0px 8px 0px #3D7FFF;
          border-radius: 8px;
          border: 1px solid #0839A7;
          font-size: 12px;
          padding: 6px;
        }

        .el-tabs__item:not(:last-child) {
          margin-right: 5px;
        }

        .el-tabs__item.is-active {
          background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
        }
      }

      .main-content-gird-title, .sals-ranking-situation {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title-row {
          width: auto;
        }

        .sals-ranking-situation-city-picker {
          width: 80px;
        }
      }
    }

    .house-property-market-sale-situation { // 房地产市场销售情况
      .main-content-gird-title {
        justify-content: flex-start;
      }

    }

    .local-city-every-area-house-property-loan-impact-analysis {
      position: relative;
      margin-top: 20px;
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg.png");
      background-size: 100% 100%;
      padding: 16px 11px 0 16px;
      height: fit-content;
      box-sizing: border-box;

      .main-content-gird-title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title-row {
          display: flex;
          align-items: center;
        }

        .house-property-sales-select {
          width: 80px;
        }
      }
    }

    .house-property-house-inventory-statistics {
      position: relative;
      margin-top: 20px;
      padding: 16px 11px 10px 16px;
      height: fit-content;
      box-sizing: border-box;
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg.png");
      background-size: 100% 100%;

      .title-row {
        width: 100%;
        display: flex;
      }

      .house-property-sales-select {
        z-index: 1;
        width: 160px;
      }

      .house-property-house-inventory-statistics__left {
        width: 100%;
        height: fit-content;

        .house-property-house-inventory-statistics__title {
          display: flex;
          flex-direction: column;

          > span {
            font-size: 14px;
          }
        }

        .house-property-house-inventory-statistics__sum {
          width: 100%;
          background-color: rgba(8, 170, 255, 0.5);
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 3px 5px 6px 12px;
          font-size: 12px;
          margin: 9px 0 8px;
        }
      }

      .house-property-house-inventory-statistics__right {
        display: flex;
        align-items: center;
        position: relative;

        .house-property-house-inventory-statistics__title {
          > span {
            font-size: 14px;
          }
        }
      }

      .house-property-house-inventory-statistics__title-right {
        .house-property-house-inventory-statistics__title-item {
          margin-top: 8px;
        }
      }

      .house-property-house-inventory-statistics__title-item {
        display: flex;
        align-items: center;
        font-size: 12px;

        > div:first-child {
          border: 1px solid black;
          width: 10px;
          height: 10px;
          margin-right: 3px;
        }
      }
    }

    .middle-map {
      height: 350px;

      .map-address {
        position: absolute;
        top: 0px;
        left: 0px;
        letter-spacing: 1px;
        text-shadow: 0px 1px 2px #c1731c;
        font-size: 18px;
        color: #60f9f4;
        letter-spacing: 1.2px;
        margin-left: 27px;
      }

      .map-address::before {
        content: "";
        position: absolute;
        top: 2px;
        left: -27px;
        width: 20px;
        height: 20px;
        background: url("@/assets/img/personInfor/map-address.png");
        background-size: 100% 100%;
      }

      .date-filtrate {
        position: absolute;
        top: 0px;
        right: 0px;
        display: flex;
        height: 30px;
      }
    }

    .table-list {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 553px;
      box-sizing: border-box;
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg-square.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 16px 31px 32px;

      &-title {
        text-align: center;
        font-size: 18px;
        margin-bottom: 18px;
      }
    }

    .analysis-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: stretch;

      .time_row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 10px;
      }

      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        > span {
          white-space: nowrap;
          font-size: 14px;
        }
      }

      .house-property-land-supply-statistics__right {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .house-property-land-supply-statistics__right-item {
        &-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 92px;
          height: 69px;
          box-sizing: border-box;
          cursor: pointer;

          p:nth-of-type(1) {
            font-size: 12px;
          }

          p:nth-of-type(2) {
            font-size: 12px;
            font-weight: bold;
          }

          p:nth-of-type(3) {
            font-size: 8px;
            display: flex;
            align-items: center;

            span {
              margin-right: 5px;
            }
          }
        }
      }

      .house-property-land-supply-statistics__right-item:not(:first-child) {
        margin-left: 5px;
      }

      .house-property-sales-select {
        z-index: 1;
        width: 160px;
      }

      .house-property-sales-select:not(:first-child) {
        margin-left: 5px;
      }
    }

    .house-property-sales-status-analysis-right {
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg-648-575.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 16px 10px 2px 16px;
      box-sizing: border-box;
      width: 48%;

      .module-title-content-middle-line {
        border: 1px solid;
        margin: 6px 0 21px;
        border-image: linear-gradient(297deg, rgba(97, 228, 255, 0), rgba(50, 197, 255, 1), rgba(102, 255, 255, 1), rgba(50, 197, 255, 1), rgba(50, 197, 255, 0)) 1 1;
      }
    }

    .listing-situation-analysis {
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 16px 10px 20px 16px;
      box-sizing: border-box;
      width: 100%;;

      .module-title-content-middle-line {
        border: 1px solid;
        margin: 6px 0 21px;
        border-image: linear-gradient(297deg, rgba(97, 228, 255, 0), rgba(50, 197, 255, 1), rgba(102, 255, 255, 1), rgba(50, 197, 255, 1), rgba(50, 197, 255, 0)) 1 1;
      }

      .house-type-and-acreage-filtrate {
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
          font-size: 14px;
        }

        .house-property-sales-select {
          width: 120px !important;
          flex-shrink: 0;
        }
      }

      .title-row {
        flex-wrap: wrap;
      }
    }

    .house-property-sales-status-statistics {
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 20px 10px 20px 16px;
      box-sizing: border-box;
      height: fit-content;
      margin-top: 20px;

      .house-property-sales-status-statistics__title {
        display: flex;
        justify-content: space-between;

        > div > span {
          font-size: 14px;
          margin-right: 24px;
        }

        .house-property-sales-select {
          z-index: 1;
          width: 15%;
        }

        .house-property-sales-select:nth-of-type(1) {
          margin-right: 16px;
        }
      }
    }

    .economic-data-statistics {
      position: relative;
      padding: 16px 18px 20px 14px;
      margin-top: 20px;
      box-sizing: border-box;
      height: fit-content;

      .time-filtrate-public {
        z-index: 1;
      }

      .main-content-gird-title-economic-statistics {
        width: 100%;
      }

      .title-row {
        width: 100%;
        display: flex;
      }

      .house-property-sales-select {
        z-index: 1;
        width: 160px;
      }

      .house-property-sales-select:not(:first-child) {
        margin-left: 10px;
      }

      .economic-data-statistics__title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 6px;

        .micro-macro-btns {
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1;

          .micro-macro-btn {
            padding: 5px 10px;
            background: #000022;
            box-shadow: inset 0px 0px 8px 0px #3D7FFF;
            border-radius: 8px;
            cursor: pointer;
            font-size: 12px;
          }

          .micro-macro-btn:first-child {
            margin-right: 20px;
          }

          .active-micro-macro-btn {
            background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
          }
        }
      }

      .macro-economic-data-statistics-tabs {
        position: relative;

        :deep(.el-tabs) {
          position: absolute;
          left: 60px;
          top: 0;
          height: 46px;
          display: flex;
          align-items: center;

          .el-tabs__header {
            margin: 0;
          }

          .el-tabs__nav-wrap:after {
            height: 0;
          }

          .el-tabs__active-bar {
            height: 0;
          }

          .el-tabs__item {
            text-align: center;
            padding: 0 10px;
            font-size: 10px;
            height: 30px;
            box-shadow: inset 0px 0px 8px 0px #3D7FFF;
            border-radius: 8px;
            cursor: pointer;
            color: white;
          }

          .el-tabs__item:not(:last-child) {
            margin-right: 5px;
          }

          .el-tabs__item.is-active {
            background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
          }
        }
      }
    }

    .economic-data-statistics:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg.png");
      background-size: 100% 100%;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      transform: rotateZ(180deg);
      z-index: 0;
    }
  }
}

:deep(.triangle) {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top: 5px solid #E13535;
  border-bottom: 0;
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
}

:deep(.triangle-reverse) {
  transform: rotate(180deg);
  border-top: 5px solid #01FEFF;
}

.cl-5c {
  color: #5cc40c;
}

.cl-c4 {
  color: #c41e0c;
}

.my-table {
  border-collapse: collapse;
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table_h {
  width: 100%;
}

.table_th {
  height: 42px;
  background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
  display: flex;
  color: #fff;
  align-items: center;
  font-size: 14px;

  th {
    font-weight: normal;
    text-align: center;
  }
}

.table_th th:nth-child(1) {
  width: 50px; /* 宽度比例为1 */
  padding: 0 10px;
}

.table_th th:nth-child(2) {
  width: 60px /* 宽度比例为2 */
}

.table_th th:nth-child(3) {
  flex: 1 /* 宽度比例为2 */
}

.table_th th:nth-child(4), .table_th th:nth-child(5) {
  width: 90px /* 宽度比例为2 */
}

.table_td {
  display: flex;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 45px;
  align-items: center;
  background: rgba(14, 129, 255, 0.34);
  margin-top: 10px;
  cursor: pointer;
}

.table_td td:nth-child(1) {
  width: 50px; /* 宽度比例为1 */
  padding: 0 10px;
  text-align: center;
}

.table_td td:nth-child(2) {
  width: 60px; /* 宽度比例为2 */
  text-align: center;
}

.table_td td:nth-child(3) {
  flex: 1; /* 宽度比例为2 */
  text-align: center;
}

.table_td td:nth-child(4), .table_td td:nth-child(5) {
  width: 90px; /* 宽度比例为2 */
  text-align: center;
}

/* .table_td td:nth-child(1) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 10px;
}

.table_td td:nth-child(2),
.table_td td:nth-child(3) {
  flex: 1;
}

.table_td td:nth-child(3) {
  display: flex;
  align-items: center;
} */

.seamless-warp {
  height: 100%;
  overflow: hidden;
}

.table-loading {
  /deep/ .el-loading-mask {
    background-color: transparent;
  }
}

.house-property-market-sales-statistics-chart {
  height: 200px;
}

.listing-situation-analysis-chart {
  height: 180px;
}

.house-property-fund-flow-detection-chart {
  height: 230px;
}

.tax-analysis-chart {
  height: 180px;
}

.loan-effect-analysis-chart {
  height: 200px;
}

.house-property-market-supply-sale-situation-chart {
  position: relative;
  height: 167px;
}

/deep/ .el-select__wrapper {
  background: #204485;

  .el-select__selected-item {
    color: white;
  }
}

.custom-select-option {
  color: #ffffff;
  background: #1C5BCC;
}

.custom-select-option.is-selected {
  color: #00e0ff;
}

.custom-select-option:hover {
  background: #368CF2;
}

/*---自定义element布局样式-start--*/
.el-col-9 {
  max-width: 35%;
  flex: 0 0 35%;
}

.el-col-6 {
  max-width: 30%;
  flex: 0 0 30%;
}
/*---自定义element布局样式-end--*/

.time-filtrate-public {
  position: absolute;
  top: 15px;
  right: 15px;
}

/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }

  .triangle {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #E13535;
    border-top: 0;
  }

  .triangle-reverse {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #01FEFF;
    border-bottom: 0;
  }
}
/deep/ .el-progress-bar__innerText {
  color: black;
}
</style>